<!-- 用户管理 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="业主姓名" prop="ownName">
          <el-input v-model="queryParams.ownName" placeholder="请输入业主姓名" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="tempTime"
            :editable="false"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="onSearch">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="always" v-loading="loading" class="mb-[10px]">
      <span>我的积分：</span>
      <span class="text-red-500 mr-2">{{ statistics.totalCoins || 0 }}</span>
      <span>已发放积分：</span>
      <span class="text-green-500 mr-2">{{ statistics.awardCoinsTotal || 0 }}</span>
      <span>待发放积分：</span>
      <span class="text-blue-500 mr-2">{{ statistics.notAwardCoinsTotal || 0 }}</span>
    </el-card>
    <el-card shadow="never" class="flex flex-col h-full" body-style="height: calc(100% - 0px);">
      <BasePageTable
        :tableColumnsData="columns"
        :tableData="pageData"
        :total="total"
        :loading="loading"
        style="height: calc(100%)"
        @handleQuery="changePage"
      >
        <template #source="{ row }">
          {{ getLabelByValue(COIN_BILLS_SOURCE_ENUM, row.source) }}
        </template>
        <template #status="{ row }">
          <el-tag :type="distributionStatusMap[row.status] || 'primary'">
            {{ getLabelByValue(DISTRIBUTION_STATUS_ENUM, row.status) }}
          </el-tag>
        </template>
        <template #region="{ row }">
          {{ row.houseSmallVo?.region }}{{ row.houseSmallVo?.neighborhood }}
        </template>
      </BasePageTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import BasePageTable from "@/components/BasePageTable/index.vue";
import { DISTRIBUTION_STATUS_ENUM } from "@/enums/conins/ConinsEnum";
import { getLabelByValue } from "@/utils/enums";
import billsAPI from "@/api/coins/bills-api";

import expectCoinsAPI, { CoinsExpectQuery, CoinsExpectVO } from "@/api/coins/expect-coins-api";
const distributionStatusMap = {
  [DISTRIBUTION_STATUS_ENUM.SENT.value]: "success",
  [DISTRIBUTION_STATUS_ENUM.NOT_SENT.value]: "info",
};
const columns = ref<any[]>([
  {
    label: "业主姓名",
    prop: "houseSmallVo.ownName",
    width: 300,
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "房屋信息",
    customSlot: "region",
    width: 200,
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "门牌号",
    prop: "houseSmallVo.houseNumber",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "装修预算（元）",
    prop: "houseSmallVo.decorationBudget",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "预估积分",
    prop: "coins",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "积分来源/用途",
    prop: "source",
    align: "center",
    customSlot: "source",
    showOverflowTooltip: true,
  },
  {
    label: "发放积分",
    prop: "awardCoins",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "创建时间",
    prop: "createTime",
    align: "center",
    width: 200,
    showOverflowTooltip: true,
  },
  {
    label: "状态",
    prop: "status",
    customSlot: "status",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "发放时间",
    prop: "awardTime",
    align: "center",
    width: 200,
    showOverflowTooltip: true,
  },
]);
const queryFormRef = ref();
const tempTime = ref();
const queryParams = reactive<CoinsExpectQuery>({
  pageNum: 1,
  pageSize: 10,
  createBeginTime: "",
  createEndTime: "",
  ownName: "",
});

const COIN_BILLS_SOURCE_ENUM = ref<Record<number, any>>({});
async function getSource() {
  try {
    const res = await billsAPI.getSource();
    res.forEach((item) => {
      COIN_BILLS_SOURCE_ENUM.value[item.type] = {
        label: item.desc,
        value: item.type,
      };
    });
  } catch (e) {
    console.log(e);
  }
}

const pageData = ref<CoinsExpectVO[]>([]);
const total = ref(0);
const statistics = ref({});
const loading = ref(false);

function onSearch() {
  queryParams.pageNum = 1;
  handleQuery();
}

// 查询
async function handleQuery() {
  try {
    loading.value = true;
    const data = await expectCoinsAPI.getPage(queryParams);
    pageData.value = data.list;
    total.value = data.total;
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}
function changePage(val: any) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  handleQuery();
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.createBeginTime = "";
  queryParams.createEndTime = "";
  tempTime.value = "";
  handleQuery();
}

async function getCoinsExpectsStatistics() {
  try {
    loading.value = true;
    const data = await expectCoinsAPI.getCoinsExpectsStatistics();
    statistics.value = data || {};
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}

function handleChange(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.createBeginTime = startTime;
    queryParams.createEndTime = endTime;
  } else {
    queryParams.createBeginTime = "";
    queryParams.createEndTime = "";
  }
}

onMounted(() => {
  getCoinsExpectsStatistics();
  handleQuery();
  getSource();
});
</script>
